<template>
  <div class="search-input">
    <div class="input">
      <input
        class="search-inp"
        type="text"
        placeholder="搜电影、搜影院"
        v-model="searchContent"
        @keyup.enter="search"
      />
      <van-icon class="icon" name="search" size="18" color="#555" />
      <div class="cancel" @click="onCancel">取消</div>
    </div>
  </div>
</template>

<script>

import { Toast } from "vant";
import {mapState} from 'vuex';

export default {
  name: "SearchInput",
  data() {
    return {
      searchContent: "",
      // value: "",

      resultData: [],
      cinemaData:[]
    };
  },
  
  computed: {
    data() {
      return this.$store.state.data;
    },
    ...mapState(['cityId'])
  },
  created() {
    //  this.getSearchResult();
  },
  methods: {
    // 创建历史记录
    search() {
      let history = {};
      // 根据时间戳生成历史记录的id
      history.id = "t" + new Date().getTime();
      

      // 历史记录内容
      history.content = this.searchContent;

      // 提交mutations
      this.$store.commit("addHistory", history);

      // 提交后清空搜索框
      this.searchContent = "";

      this.axios({
        method: "get",
        url: "/search/movies",
        params: {
          keyword: history.content,
          ci: this.cityId,
          offset: 0,
          limit: 10,
        },
        // search.state.test
      })
        .then((result) => {
          

          this.resultData = result.data;
          this.$store.commit("addSearchResult", this.resultData);
        })
        .catch((err) => {
          
        });

       this.axios({
        method: "get",
        url: "/search/cinemas",
        params: {
          keyword: history.content,
          ci: this.cityId,
          offset: 0,
          limit: 10,
        },
        // search.state.test
      })
        .then((result) => {
          

          this.cinemaData = result.data;

          this.$store.commit("addCinemaResult", this.cinemaData);
        })
        .catch((err) => {
          
        });
    },
    onCancel() {
      Toast("取消");
    },
    getSearchResult(content) {},
  },
};
</script>

<style lang="less" scoped>
.input {
  // border: 1px solid #000;
  height: 34px;
  padding: 0 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  .search-inp {
    box-sizing: border-box;
    height: 34px;
    line-height: 34px;
    flex: 1;
    padding-left: 34px;
    position: relative;
    font-size: 14px;
    color: #969799;
  }
  .icon {
    position: absolute;
    left: 26px;
    // top: 4px;
  }
  .cancel {
    color: #dd403b;
    font-size: 15px;
    margin-left: 8px;
  }
}
</style>